<script setup>
import { ref, reactive, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from "vue"
import { addOrEditPermission } from '@/api/System/index'
import getRules from "@/validUtils";
const props = defineProps({
  dialogFormVisible:{
    type:Boolean,
    default:true
  },
  permissionId:{
    type:String,
    default:''
  },
  addOrEdit:{
    type:Boolean,
    default:false
  },
  editForm:{
    type:Object,
    default:()=>({})
  },
  fName:{
    type:String,
    default:'TOP'
  },
  Client:{
    type:Number,
    default:1
  }
})
let emit = defineEmits(['close', 'sure'])
const close = () => {
  emit('close',false)
}


const sure = async() => {
  await permissionForm.value.validate(async(valid, fields) => {
    if (valid) {
      try {
        loading.value = true
        let data = {
          ...form.value
        }
        const res = await addOrEditPermission(data)
        // console.log(res,'res');
        emit('sure',false)
      } catch (error) {
        
      }finally{
        loading.value = false
      }
    } else {
      console.log('error submit!', fields)
    }
  })
  
 
 
}

const permissionForm = ref(null)
const loading = ref(false)
const form = ref({
  fName:'Top', //父级名称
  id:'',
  permissionName:'', //权限名称
  permissionLabel:'', //权限标签
  parentId:'', //父节点id
  orderNum:'', //显示顺序
  redirect:'', //重定向地址
  path:'', //路由地址
  component:'', //组件路径
  isFrame:0, //是否外链
  permissionType:'', //权限类型 M目录 C菜单 B按钮 F字段）
  visible:1, //是否可见
  permissionStatus:0, //权限状态
  icon:'', //图标路径
  permissionRemark:'', //权限备注
  permissionClient:1, //使用端口1: 管理平台 2: 商户SAAS 3: C端客户(默认1)
})


const permissionType = ref([
    {
      value: 'M',
      label: '目录',
    },
    {
      value: 'C',
      label: '菜单',
    },
    {
      value: 'B',
      label: '按钮',
    },
    {
      value: 'F',
      label: '字段',
    },
])

//组件挂载到节点上之前执行的函数
onBeforeMount(()=>{
  if(props.addOrEdit){
    console.log('新增');
    form.value.parentId = props.permissionId || ''
  }else{
    console.log('编辑');
    form.value = {
      ...props.editForm
    }
    form.value.id = props.permissionId || ''
    console.log(form.value,'form.value');
  }
  form.value.fName = props.fName
  form.value.permissionClient = props.Client
})

//组件挂载完成后执行的函数
onMounted(()=>{})

//组件更新之前执行的函数
onBeforeUpdate(()=>{})

//组件更新完成之后执行的函数
onUpdated(()=>{})

//组件卸载之前执行的函数
onBeforeUnmount(()=>{})

//组件卸载完成后执行的函数
onUnmounted(()=>{})

</script>

<template>
  <div class="">
    <el-dialog 
    v-model="props.dialogFormVisible"
    :close-on-click-modal="false"
    :before-close="close"
    :title="props.addOrEdit ?'新增' : '编辑'"
    width="600px"
    v-loading="loading"
     >
    <el-form :model="form"  :label-width="100" ref="permissionForm">
      <el-form-item label="父级名称：">
        <el-input style="width: 239px;" v-model="form.fName" placeholder="EnglishName" disabled/>
      </el-form-item>
      <el-form-item label="权限名称：" prop="permissionName" :rules="getRules('input', '权限名称')">
        <el-input style="width: 239px;" v-model="form.permissionName" placeholder="EnglishName" />
      </el-form-item>
      <el-form-item label="权限标签：" prop="permissionLabel" :rules="getRules('input', '权限标签')">
        <el-input style="width: 239px;" v-model="form.permissionLabel" placeholder="中文名称" />
      </el-form-item>
      <el-form-item label="显示顺序：">
        <el-input style="width: 100px;" v-model="form.orderNum" placeholder="请输入" type="number"/>
      </el-form-item>
      <el-form-item label="重定向地址：">
        <el-input v-model="form.redirect" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="路由地址：">
        <el-input v-model="form.path" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="组件路径：">
        <el-input v-model="form.component" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="权限图标：">
        <el-input v-model="form.icon" placeholder="请输入图标路径 例如：http://www.iconfont.cn"/>
      </el-form-item>
      <el-form-item label="权限备注：">
        <el-input v-model="form.permissionRemark" placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="是否外链：">
        <el-radio-group v-model="form.isFrame">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="权限状态：">
        <el-radio-group v-model="form.permissionStatus">
          <el-radio :label="1" size="large">启用</el-radio>
          <el-radio :label="0" size="large">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="权限类型：" prop="permissionType" :rules="getRules('select', '权限类型')">
            <el-select
              v-model="form.permissionType"
              placeholder="请选择类型"
              style="width: 240px"
            >
              <el-option
                v-for="item in permissionType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
      </el-form-item>
      <el-form-item label="是否可见：">
        <el-radio-group v-model="form.visible">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="sure">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<style lang="less" scoped>

:deep(.el-radio) {
  height: 33px;
}
</style>
